import {Pie, PieChart, ResponsiveContainer, Sector, SectorProps, Cell} from 'recharts';
import {useAtom} from "jotai/index";
import {selectedIdsAtom} from "../store/atoms";
import {useEffect, useMemo, useState} from "react";
import {History, Question} from "../types";

type Coordinate = {
    x: number;
    y: number;
};

type PieSectorData = {
    percent?: number;
    name?: string | number;
    midAngle?: number;
    middleRadius?: number;
    tooltipPosition?: Coordinate;
    value?: number;
    paddingAngle?: number;
    dataKey?: string;
    payload?: any;
};

interface Data{
    name: string;
    value: number;
}

type PieSectorDataItem = React.SVGProps<SVGPathElement> & Partial<SectorProps> & PieSectorData;

const COLORS = ['#8884d8', '#82ca9d'];

function MainPieChart2() {
    const [selectedIds] = useAtom(selectedIdsAtom);
    const [quesList, setQuesList] = useState<Question[]>([]);
    const data:Data[] = useMemo(() => {
        let data1:Data = {name:'判断推理', value:0};
        let data2:Data = {name:'言语理解与表达', value:0};
        quesList.forEach(q => {
            if(q.ques_type === '判断推理'){
                data1.value++;
            }
            if(q.ques_type === '言语理解与表达'){
                data2.value++;
            }
        })
        return [data1, data2];
    }, [quesList]);
    useEffect(() => {
        window.ipcRender.invoke('ques:getSelected', {
            ids: selectedIds,
        }).then((res: Question[]) => {
            setQuesList(res);
        })
    }, [selectedIds]);

    const renderShape = ({
                             cx,
                             cy,
                             innerRadius,
                             outerRadius,
                             startAngle,
                             endAngle,
                             fill,
                             payload,
                             percent,
                             value,
                         }: PieSectorDataItem) => {
        const centerX = cx ?? 0;
        const centerY = cy ?? 0;
        const outerR = outerRadius ?? 0;
        const offsetY = 20;

        return (
            <g>
                <Sector
                    cx={centerX}
                    cy={centerY}
                    innerRadius={innerRadius}
                    outerRadius={outerR}
                    startAngle={startAngle}
                    endAngle={endAngle}
                    fill={fill}
                />
                <text x={centerX} y={centerY + outerR + offsetY} textAnchor="middle" fill="#333" fontSize={14}>
                    {payload.name}
                </text>
                <text x={centerX} y={centerY + outerR + offsetY + 20} textAnchor="middle" fill="#333" fontSize={12}>
                    题量: {value} 占比:{((percent ?? 0) * 100).toFixed(2)}%
                </text>
            </g>
        );
    };

    return (
        <ResponsiveContainer width="100%" height="100%">
            <PieChart width={180} height={150}>
                <Pie
                    activeShape={renderShape}
                    data={data}
                    cx="50%"
                    cy="30%"
                    innerRadius={25}
                    outerRadius={45}
                    dataKey="value"
                >
                    {data.map((_, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]}/>
                    ))}
                </Pie>
            </PieChart>
        </ResponsiveContainer>
    );
}

export default MainPieChart2;
